<template>
  <div class="dashboard-container">
    <el-form :model="dataForm" ref="dataForm" label-width="130px">
      <!--prop:向父组件传值-->
      <el-form-item label="文档标题" prop="username">
        <el-input
          v-model="dataForm.title"
          placeholder="请输入标题"
          style="width: 30%"
        ></el-input>
      </el-form-item>

      <el-form-item label="描述" prop="password">
        <el-input
          v-model="dataForm.remark"
          type="textarea"
          style="width: 30%"
        ></el-input>
      </el-form-item>

      <!--使用upload组件-->
      <el-upload
        ref="upload"
        :action="''"
        :limit="3"
        :file-list="dataForm.fileList"
        :auto-upload="false"
        :on-change="handleChange"
      >
        <el-button slot="trigger" size="small" type="primary"
          >选取文件</el-button
        >
        <span slot="tip" class="el-upload__tip">
          只能上传一个文件，且文件大小不能超过2MB</span
        >
      </el-upload>
      <el-button type="primary" @click="submitForm('formData')"
        >上 传</el-button
      >
    </el-form>
  </div>
</template>
<script>
import { axios } from "@/plugins/axios";
import { mapGetters } from "vuex";
import qs from "qs";

export default {
  data() {
    return {
      dataForm: {
        title: "",
        remark: "",
        fileList: [],
      },
    };
  },

  created() {
    this.getUpload();
  },

  methods: {
    handleChange(file, fileList) {
      console.log(file, fileList);
      this.dataForm.fileList = fileList;
    },

    submitForm(value) {
      // 新建表单
      const fd = new FormData();
      // 添加数据到表单
      fd.append("title", this.dataForm.title);
      fd.append("remark", this.dataForm.remark);
      fd.append("file", this.dataForm.fileList.pop().raw);
      const url = `http://localhost:8080/hrm/addDocument`;
      this.$axios
        .post(url, fd, {
          //传数据到后台，数据已经添加到新的表单里面了，所以传的是新建表单的值
          Headers: {
            "Content-Type": "multipart/form-data",
          },
        })
        .then(function (response) {
          if (response.data == 200) {
            this.message({
              message: "操作成功",
              type: "success",
            });
          }
        });
    },

  },
};
</script>